<template>
  <div class="menu">
    {{ num }}
    <div
      v-for="(item, index) in MENU_LIST"
      :key="index"
      class="menu-item"
      @click="linkTo(xxx)"
    >
      <img :src="item.icon" alt="" class="menu-icon" />
      <!-- <p>{{ item.name }}</p> -->
    </div>
  </div>
</template>
<script>
export default {
  name: "Rotare",
  data() {
    return {
      MENU_LIST: [
        {
          icon: require("../../assets/bg.png"),
          name: "菜单1",
        },
        {
          icon: require("../../assets/bg.png"),
          name: "菜单2",
        },
        {
          icon: require("../../assets/bg.png"),
          name: "菜单3",
        },
      ],
      num: 0,
    };
  },
  activated() {
    this.num++;
  },
  deactivated() {
    console.log("离开缓存组件");
  },
};
</script>
<style lang="scss" scoped>
.menu {
  // background: red;
  background: url("../../assets/bg.png") no-repeat;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  height: 100%;
  position: relative;
  text-align: center;
  line-height: 800px;
  color: #f8f2f2;
  font-size: 40px;
  width: 90%;
  height: calc(100% - 40px);
  left: 50%;
  transform: translateX(-50%);
  .menu-item {
    width: 326px;
    height: 386px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 33px 0;
    position: absolute;
    cursor: pointer;
    //3个卡片,x和y轴动画加起来是20s , 20s/3 约等于 6.667s
    //每个球y轴动画延迟 从0递减2.857s,x轴与y相差动画时长的一半（10s/2）
    &:nth-child(1) {
      animation: animateX 10s cubic-bezier(0.36, 0, 0.64, 1) -5s infinite alternate,
        animateY 10s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate,
        scaleAnimate 20s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate;
    }
    &:nth-child(2) {
      animation: animateX 10s cubic-bezier(0.36, 0, 0.64, 1) -11.667s infinite alternate,
        animateY 10s cubic-bezier(0.36, 0, 0.64, 1) -6.667s infinite alternate,
        scaleAnimate 20s cubic-bezier(0.36, 0, 0.64, 1) -6.667s infinite alternate;
    }

    &:nth-child(3) {
      animation: animateX 10s cubic-bezier(0.36, 0, 0.64, 1) -18.334s infinite alternate,
        animateY 10s cubic-bezier(0.36, 0, 0.64, 1) -13.334s infinite alternate,
        scaleAnimate 20s cubic-bezier(0.36, 0, 0.64, 1) -13.334s infinite alternate;
    }
    img {
      width: 100%;
      height: 100%;
    }
  }
}
@keyframes animateX {
  0% {
    left: -50px;
  }
  100% {
    left: 75%;
  }
}

@keyframes animateY {
  0% {
    top: -100px;
  }
  100% {
    top: 400px;
  }
}

@keyframes scaleAnimate {
  0% {
    transform: scale(0.6);
  }
  50% {
    transform: scale(1);
  }
  100% {
    transform: scale(0.6);
  }
}
</style>
